<template>
  <div class="main">
    <!-- 左边信息 -->
    <div class="info">
      <el-card>
        <el-carousel height="250px" :interval="2000" indicator-position="none">
          <el-carousel-item
            v-for="item in agentList"
            :key="item.id"
            @click.native="addLeft(item.id)"
          >
            <div class="content">
              <h4>经纪人信息</h4>
              <p>王牌经纪人：{{ item.name }}</p>
              <p>联系方式：{{ item.phone }}</p>
              <p>邮箱：{{ item.email }}</p>
              <p>点击了解详情......</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>
    <!-- 右边信息 -->
    <div class="right">
      <el-card>
        <el-carousel height="250px" :interval="2000" indicator-position="none">
          <el-carousel-item
            v-for="item in propertiesList"
            :key="item.id"
            @click.native="addFn(item.id)"
          >
            <div class="content">
              <h4>房产信息</h4>
              <p>房产类型：{{ item.title }}</p>
              <p>经纪人：{{ item.agent.name }}</p>
              <p>房产地址：{{ item.address }}</p>
              <p>点击了解详情......</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>
    <!-- 轮播图信息 -->
    <div class="agents">
      <!--v-imgerror="require('../employees/images/dog.png')"  -->
      <h1><i class="el-icon-s-custom"></i> 经纪达人推荐</h1>

      <el-carousel type="card" height="350px" :interval="2000">
        <el-carousel-item
          v-for="item in agentList"
          :key="item.id"
          @click.native="addLeft"
        >
          <img :src="item.image" alt="" />
          <!-- <div class="mark" /> -->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>


<script>
import { getAgent, getProperties } from "@/api/agents";
export default {
  data() {
    return {
      agentList: [],
      propertiesList: [],
    };
  },
  async created() {
    const res = await getAgent({
      _limit: 100,
      _start: 0,
    });
    this.agentList = res.data;
    console.log(70, this.agentList);
    const result = await getProperties();
    console.log(80, result.data);
    this.propertiesList = result.data;
  },
  methods: {
    addFn() {
      this.$router.push('./property');
    },
    addLeft(){
      this.$router.push('/agentslist')
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: calc(100vh - 60px);
  background-color: rgba(102, 106, 228, 0.1);
  background-image: url(@/assets/common/311320.jpg);
  // opacity: 0.8;
  background-size: 100% 100%;
}
.el-card {
  opacity: 0.6;
  // background-image: url(@/assets/common/2.jpeg);
}
.info {
  position: fixed;
  left: 20px;
  top: 190px;
  text-align: center;
  .content {
    color: rgb(249, 180, 62);
    p{
      padding: 12px 0;
    }
  }
  .el-carousel {
    width: 220px;
  }
}
.right {
  width: 250px;
  height: 250px;
  position: fixed;
  right: 20px;
  top: 190px;
  background-color: #99a9bf;
  // text-align: center;
  color: rgb(249, 180, 62);
  .content {
    color: rgb(249, 180, 62);
    p{
      padding: 12px 0;
    }
  }
  .el-carousel {
    width: 240px;
  }
}
h4 {
  // text-align: center;
  padding-bottom: 10px;
}

.agents {
  width: 900px;
  margin: 0 auto;
  padding-top: 250px;

  //  background-color: rgba(110, 94, 94, 0.2);
  h1 {
    margin-left: 300px;
    margin-bottom: 60px;
    color: rgb(249, 180, 62);
    span {
      font-size: 14px;
      color: rgb(163, 121, 121);
    }
  }
}
.el-carousel {
  width: 900px;
  margin: 0 auto;
  .el-carousel__item {
    img {
      width: 100%;
      height: 350px;
    }
  }

  // 7

  // .el-carousel__item:nth-child(2n + 1) {
  //   background-color: #d3dce6;
  // }
}
</style>
